<template>
  <div class="comm-odity">
    <div class="comm-nav">
      <t-navbar
        title="商品详情"
        :fixed="false"
        left-arrow
        @left-click="handleClick"
      />
    </div>
    <div class="comm-img">
      <img :src="item.img" alt="商品图片" />
    </div>
    <div class="sl_box_price">
      <div class="sl_box_price1">
        <div style="color: #f84c55">
          ￥<text style="font-weight: bold; font-size: 24px">{{
            item.price
          }}</text>
          <text
            style="
              color: #999999;
              font-size: 20px;
              text-decoration: line-through;
              margin: 0 10px;
            "
            >￥{{ item.price }}</text
          >
          <text
            style="
              font-size: 14px;
              background-color: #ff5050;
              color: #fff;
              padding: 5px;
              border-radius: 5px;
            "
            >促销价</text
          >
        </div>
        <div style="color: #999999">已售683件</div>
      </div>
      <div class="sl_box_price2">{{ item.name }}</div>
      <div class="sl_box_price3">
        洛神玫瑰33枝 <text style="color: #ffab64">花如其名 心中永远的神</text>
      </div>
    </div>
    <div class="sl_box_details">
      <div class="detailsBox">
        <div class="detailsBox——box">
          <div class="detailsBox——box1">已选</div>
          <div
            class="detailsBox——box2"
            style="border-bottom: 1px solid #e1e1e1"
          >
            <div>心中洛神</div>
            <div><icon name="greater-than" color="#dcdcdc" /></div>
          </div>
        </div>
        <div class="detailsBox——box">
          <div class="detailsBox——box1">送至</div>
          <div class="detailsBox——box2">
            <t-cell :note="note" @click="showCascader" arrow />
            <t-cascader
              v-model="selectedAddress"
              :options="options"
              title="请选择地址"
              @change="onChange"
              @pick="onPick"
              :visible="visible"
              @close="visible = false"
            />
          </div>
        </div>
      </div>
      <div class="detailsBox">
        <div class="detailsBox——box">
          <div class="detailsBox——box1">花语</div>
          <div
            class="detailsBox——box2"
            style="border-bottom: 1px solid #e1e1e1"
          >
            <div>一眼足以定终身，我心佳人比洛神</div>
            <div><icon name="greater-than" color="#dcdcdc" /></div>
          </div>
        </div>
        <div class="detailsBox——box">
          <div class="detailsBox——box1">材料</div>
          <div
            class="detailsBox——box2"
            style="border-bottom: 1px solid #e1e1e1"
          >
            <div>洛神玫瑰33枝</div>
            <div><icon name="greater-than" color="#dcdcdc" /></div>
          </div>
        </div>
        <div class="detailsBox——box">
          <div class="detailsBox——box1">配送</div>
          <div class="detailsBox——box2">
            <div>“精品鲜花”免费配送</div>
            <div><icon name="greater-than" color="#dcdcdc" /></div>
          </div>
        </div>
      </div>
      <div class="detailsBox">
        <div class="detailsBox——box2">
          <div class="detailsBox_box1">晒单与评价</div>
          <div class="detailsBox_box2">
            <div style="text-align: right; width: 90%">有56条评价</div>
            <div><icon name="greater-than" color="#dcdcdc" /></div>
          </div>
        </div>
        <div class="detailsBox——box3" v-for="(item, index) in 2" :key="index">
          <div class="detailsBox——box3_font1">
            <div class="topfont">
              <div class="topfont1">
                <img src="https://picsum.photos/200/300?1" alt="" />
              </div>
              <div class="topfont2">王*丽</div>
            </div>
            <div style="box-sizing: border-box; padding-top: 3%">
              <t-rate v-model="value" variant="filled" @change="changeValue" />
            </div>
          </div>
          <div class="detailsBox——box3_font2">
            真的很棒，从鲜花到配送没得挑，以后还会买的!
          </div>
          <div class="detailsBox——box3_font3">
            <img src="https://picsum.photos/200/300?6" alt="" />
            <img src="https://picsum.photos/200/300?6" alt="" />
            <img src="https://picsum.photos/200/300?6" alt="" />
          </div>
          <div class="detailsBox——box3_font4">
            <icon name="location" />广东佛山市顺德区
          </div>
        </div>
        <div style="text-align: center; margin-bottom: 10px">查看全部评价</div>
      </div>
      <div class="details">
        <t-divider content="商品详情" />
      </div>
    </div>
    <div class="sl_bottom">
      <div style="padding: 20px; box-sizing: border-box">
        <div style="display: flex; line-height: 20px; margin-bottom: 10px">
          <div style="margin-right: 10px; color: #999999; width: 20%">编号</div>
          <div style="width: 80%">901527</div>
        </div>
        <div style="display: flex; line-height: 20px; margin-bottom: 10px">
          <div style="margin-right: 10px; color: #999999; width: 20%">类别</div>
          <div style="width: 80%">鲜花</div>
        </div>
        <div style="display: flex; line-height: 20px; margin-bottom: 10px">
          <div style="margin-right: 10px; color: #999999; width: 20%">包装</div>
          <div style="width: 80%">
            白色小号英文插画纸6张、白色雪梨纸2张、粉色罗 纹烫金丝带2米
          </div>
        </div>
        <div style="display: flex; line-height: 20px">
          <div style="margin-right: 10px; color: #999999; width: 20%">附送</div>
          <div style="width: 80%">下单填写留言，即免费赠送精美贺卡!</div>
        </div>
      </div>
      <div>
        <img src="https://picsum.photos/200/300?6" alt="" style="width: 100%" />
      </div>
      <div style="text-align: center; margin: 10px 0">心中洛神</div>
      <div style="text-align: center; margin: 10px 0 30px">
        一眼足以定终身，我心佳人比洛神
      </div>
    </div>
  </div>
</template>

<script setup>
import "./comm.css";
import { Icon } from "tdesign-icons-vue-next";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const item = ref(null);
const changeValue = (val) => {
  console.log("current value is", val);
};
const value = ref(3);
const handleClick = () => {
  // 点击左侧按钮，返回上一页
  window.history.back();
};
if (route.query.item) {
  item.value = JSON.parse(route.query.item); // 解析 JSON 字符串
}
const data = {
  areaList: [
    {
      label: "北京市",
      value: "110000",
      children: [
        {
          value: "110100",
          label: "北京市",
          children: [
            { value: "110101", label: "东城区" },
            { value: "110102", label: "西城区" },
            { value: "110105", label: "朝阳区" },
            // ...其他区
          ],
        },
      ],
    },
    {
      label: "天津市",
      value: "120000",
      children: [
        {
          value: "120100",
          label: "天津市",
          children: [
            { value: "120101", label: "和平区" },
            { value: "120102", label: "河东区" },
            // ...其他区
          ],
        },
      ],
    },
    // ...其他省市
  ],
};

const options = data.areaList;
const selectedAddress = ref([]);
const visible = ref(false);
const note = ref("请选择地址");

const onChange = (value, options) => {
  note.value = options?.map((item) => item.label).join("/") || "请选择地址";
};
const showCascader = () => {
  visible.value = true;
};

const onPick = (context) => {
  console.log(
    `level: ${context.level}, value: ${context.value}, index: ${context.index}`
  );
};
</script>

<style scoped lang="scss">
/* 添加您的样式 */
</style>
